<%@ page import="com.baizhi.entity.User" %>
<%@ page import="java.util.List" %>
<%@ page import="com.baizhi.entity.Title" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Web Tech Template - Free CSS Layout</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="css/templatemo_style.css" rel="stylesheet" type="text/css"/>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<%
    User users = (User)session.getAttribute("u");
    System.out.println("页面"+users);
%>
<div id="templatemo_header">
    <div id="site_title">

        <a><%= users.getName()%>，欢迎</a>
                <span style="display: block;float: left;font-weight: normal;text-decoration: none;color: #da9d0c;font-size: 15px;padding-left: 60px"> 当前有<%= users.getFansnumber()%>人关注</span>

    </div>

    <div id="header_right">

               <a href="#"><img src="images/templatemo_twitter.png" alt="twitter" /></a><a href="#"><img src="images/templatemo_rss.png" alt="rss" /></a>

        <div id="newsletter_box">
            <form action="${pageContext.request.contextPath}/SlurAllServlet" method="post">
                <p>搜索</p>
                <input type="text" id="user" name="str" class="newsletter_email" color="#000000" placeholder="请输入"/>
                <input style="font-weight: bold;" type="submit" name="submit" id="submit" value=""/>
            </form>
        </div>

    </div>

    <div class="cleaner"></div>

</div>

<div id="templatemo_menu_wrapper">

    <div id="templatemo_menu">
        <ul>
            <li><a href="#" class="current" style="cursor:default"><span></span>首页</a></li>
            <li><a href="#"><span></span>关注</a></li>
                       <li><a href="#"><span></span>粉丝(<%= users.getFansnumber()%>)</a></li>
            <li><a href="${pageContext.request.contextPath}/write_blog.jsp"><span></span>发表博客</a></li>
            <li><a href="ShowMyArticleAction?MyName=<%=users.getName()%>"><span></span>我的文章</a></li>
        </ul>
    </div>
</div>


<div id="templatemo_main"><span class="tm_bottom"></span>

    <div id="templatemo_content">

        <div class="content_box">
            <h1><span>在这里，你可以看到所有人的文章</span></h1>
            <%--      管理控件      --%>
            <%--            <button id="manage" style="float: right;background-color: transparent;color: darkgray;border: 1px solid orange;">管理文章</button>--%>
            <p>记得点赞啊</p>

        </div>
        <%--  调用forEac方法遍历传过来的集合，并将其显示到jsp页面上      --%>
        <c:forEach items="${sessionScope.titles}" var="myblog" varStatus="s">
            <div class="post_box">
                <a href="${pageContext.request.contextPath}/blogServletTest?id=${myblog.id}"
                   style="display: block">
                    <div class="header">
                        <h2><a href="${pageContext.request.contextPath}/blogServletTest?name=${myblog.title}">${myblog.title}</a></h2>
                        <div class="tag"><strong>Tags:</strong>${myblog.keyWord}</div>
                        <span class="posted_date">
                    <c:set var="date" scope="session" value="${myblog.date}"/>
                        <c:out value="${myblog.date}"/>
                </span>
                    </div>
                        <%--                images/templatemo_image_01.jpg              --%>
                    <img class="articleImg" src="images/toux.jpg" alt="image"/>
                    <div class="pb_right"
                         style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;">
                        <p style="overflow: hidden;">${myblog.text}</p>
                        <div class="like">赞(${myblog.likeCount})</div>
                        <div class="comment"></div>
                    </div>
                    <div class="cleaner"></div>
                </a>
                    <%--                <div class="operate" style="float:right;display: none">--%>
                    <%--                    <a class="changeBtn" href="${pageContext.request.contextPath}/inToChangeServlet?aid=${articles.aid}" style="background-color: transparent;color: white;border: 1px solid orange;font-size: 15px;cursor: pointer;">修改</a>--%>
                    <%--                    <a class="deleteBtn" href="javascript:deleteArtcle(${articles.aid});" style="background-color: transparent;color: white;border: 1px solid orange;font-size: 15px;cursor: pointer;">删除</a>--%>
                    <%--                </div>--%>
            </div>
        </c:forEach>


        <div id="templatemo_menu">
            <ul>
                <%--      判断到第一页时按钮不可见      --%>
                <c:if test="${pb.currentPage  == 1}">
                    <li style="display: none"><a
                            href="${pageContext.request.contextPath}/findArticleByPageServlet?currentPage=${pb.currentPage - 1}"><span></span><</a>
                    </li>
                </c:if>
                <c:if test="${pb.currentPage != 1}">
                    <li>
                        <a href="${pageContext.request.contextPath}/findArticleByPageServlet?currentPage=${pb.currentPage - 1}"><span></span><</a>
                    </li>
                </c:if>
                <%--       遍历出下方的页数     --%>
                <c:forEach begin="1" end="${pb.totalPage}" var="i">
                    <%--         判断当前页码样式改变       --%>
                    <c:if test="${pb.currentPage == i}">
                        <li><a href="${pageContext.request.contextPath}/findArticleByPageServlet?currentPage=${i}"
                               class="current"><span></span>${i}</a></li>
                    </c:if>

                    <c:if test="${pb.currentPage != i}">
                        <li>
                            <a href="${pageContext.request.contextPath}/findArticleByPageServlet?currentPage=${i}"><span></span>${i}
                            </a></li>
                    </c:if>

                </c:forEach>
                <%--      判断最后一页时按钮不可见      --%>
                <c:if test="${pb.currentPage == pb.totalPage}">
                    <li style="display: none"><a
                            href="${pageContext.request.contextPath}/findArticleByPageServlet?currentPage=${pb.currentPage + 1}"><span></span>></a>
                    </li>
                </c:if>
                <c:if test="${pb.currentPage != pb.totalPage}">
                    <li>
                        <a href="${pageContext.request.contextPath}/findArticleByPageServlet?currentPage=${pb.currentPage + 1}"><span></span>></a>
                    </li>
                </c:if>

            </ul>
        </div>
    </div>

    <div id="templatemo_sidebar">
        <div class="sidebar_box">
            <h3>Tag Cloud</h3>
            <div class="sb_content">
                <a href="#" style="font-size:12px">Aenean</a> <a href="#" style="font-size:11px">Cursus</a> <a href="#"
                                                                                                               style="font-size:16px">Maecenas</a>
                <a href="#" style="font-size:11px">Aliquam Ligula</a> <a href="#" style="font-size:20px">Egestas</a> <a
                    href="#" style="font-size:16px">Suscipit</a> <a href="#" style="font-size:12px">Sapien</a> <a
                    href="#" style="font-size:28px">Dignissim</a> <a href="#" style="font-size:14px">Vestibulum</a> <a
                    href="#" style="font-size:12px">Lorem</a> <a href="#" style="font-size:14px">Urnain</a> <a href="#"
                                                                                                               style="font-size:20px">Neque</a>
                <a href="#" style="font-size:12px">Aenean</a>
            </div>
        </div>

        <div class="sidebar_box">
            <h3>Categories</h3>
            <div class="sb_content">
                <ul class="sidebar_menu">
                    <li><a href="#">CSS Techniques</a></li>
                    <li><a href="#">Web Design Tips</a></li>
                    <li><a href="#">Best Wallpapers</a></li>
                    <li><a href="#">Free Fonts</a></li>
                    <li><a href="#">Photoshop Tutorials</a></li>
                    <li><a href="#">3D Animation Tutorials</a></li>
                </ul>
            </div>
        </div>

        <div class="sidebar_box">
            <h3>Archives</h3>
            <div class="sb_content">
                <ul class="sidebar_menu">
                    <li><a href="#">CSS Templates</a></li>
                    <li><a href="#">Web Design Ideas</a></li>
                    <li><a href="#">Free Wallpapers</a></li>
                    <li><a href="#">Free Pixel Fonts</a></li>
                    <li><a href="#">Illustrator Tutorials</a></li>
                    <li><a href="#">3D Character Tutorials</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="cleaner"></div>
</div>

<div id="templatmeo_bottom">
    <div class="bottom_box">
        <h5><span>Sed Necest</span> Suspendisse a nibh</h5>
        <p>Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum
            ipsum.</p>
        <a href="#" class="continue">more info</a>
    </div>

    <div class="bottom_box">
        <h5><span>Lorem ipsum</span> dolor sit amet</h5>
        <p>Vestibulum eleifend, enim ut molestie pulvinar, purus est fringilla augue, ut tristique nunc neque a
            libero.</p>
        <a href="#" class="continue">more info</a>
    </div>

    <div class="bottom_box">
        <h5><span>Recent</span> Blog Post</h5>
        <ul class="bottom_box_list">
            <li><a href="#">Duis vitae velit sed lesuada dignissim.</a></li>
            <li><a href="#">Donec mollis aliquet ligula.</a></li>
            <li><a href="#">Maecenas adipiscing elementum ipsum.</a></li>
        </ul>
    </div>

</div>

<div id="templatemo_footer">

    <ul class="footer_menu">
        <li class="first"><a href="#">Home</a></li>
        <li><a href="#">Web 2.0</a></li>
        <li><a href="#">Wordpress</a></li>
        <li><a href="#">Graphics</a></li>
        <li><a href="#">Inspirations</a></li>
        <li><a href="#">Freebies</a></li>
    </ul>

    Copyright © 2048 <a href="#">Your Company Name</a>
    Validate <a href="http://validator.w3.org/check?uri=referer">XHTML</a> &amp; <a
        href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

</div>

<script>
    let manageBtn = $("#manage")//管理按钮
    let operate = $(".operate")//包裹修改和删除按钮的盒子
    let judge = false;//上面盒子是否显示的判断条件
    let deleteBtn = $(".deleteBtn")//删除
    let changeBtn = $(".changeBtn")//修改
    let searchBtn = $("#submit")//搜索文章按钮

    //单击判断是否显示按钮
    manageBtn.click(function () {
        if (judge == false) {
            operate.css("display", "block");
        } else {
            operate.css("display", "none");
        }
        judge = !judge;
    })



</script>
</body>
</html>
